<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script>
        // 调试时可以通过在页面定义一个元素，打印信息，使用alert方法不够优雅

        function log(obj) {

            $("#result").append(obj).append(" ").append("<br />");

        }

        $(document).ready(function(){

            // 页面载入完成后即唤起收银台

            // 此处${tradeNO}为模板语言语法，实际调用样例类似为tradePpay("2016072621001004200000000752")

            tradePay("20240316220");

            // 点击payButton按钮后唤起收银台

            $("#payButton").click(function() {

                tradePay("20240316220");

            });

            // 通过jsapi关闭当前窗口，仅供参考，更多jsapi请访问

            // /aod/54/104510

            $("#closeButton").click(function() {

                AlipayJSBridge.call('closeWebview');

            });

        });

        // 由于js的载入是异步的，所以可以通过该方法，当AlipayJSBridgeReady事件发生后，再执行callback方法

        function ready(callback) {

            if (window.AlipayJSBridge) {

                callback && callback();

            } else {

                document.addEventListener('AlipayJSBridgeReady', callback, false);

            }

        }

        function tradePay(tradeNO) {

            ready(function(){

                // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)

                AlipayJSBridge.call("tradePay", {

                    tradeNO: tradeNO

                }, function (data) {

                    log(JSON.stringify(data));

                    if ("9000" == data.resultCode) {

                        console.log('支付成功');

                    }

                });

            });

        }

        function onBridgeReady(){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":"",     //公众号ID，由商户传入
                    "timeStamp":"1710494721",         //时间戳，自1970年以来的秒数
                    "nonceStr":"c246fc4c561e4a9498b1f6aaaf2237fc", //随机串
                    "package":"prepay_id=",//预支付交易会话标识
                    "signType":"RSA",         //微信签名方式：
                    "paySign":"SIiM9gYKHypdRzWtJKZX4Ie+7mZ/Ym/dMHcDaA5GygBuuSm8fqQ5v0o3WMkYWyx0s7EFu/Zyg9L8FsDymc0Y8Xv31C/rv7uBGVrn76Jh+Cxu8dun6avxDDI11QFdSualTmdfpG1TvvWXr4w05quh3HXdX6RtyTdo55rWT7d8ZyGdQenrrUvQSoZOAmdQaiTXyrdqTcePaRo7cses2+gcLHyvvOfFLHXcFf0DjIyDtdu66Kce3H+el/lNAQuwUx2Hkq2sQ9igLcAMelW9VPgbz/1PBx4GqhL+69R+ruPFA+Wv4wGiKbDEZYDwca+cBIE+7eiGnJ0EAsbQBjXp3Q/clg==" //微信签名
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    }
                });
        }
        if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        }else{
            onBridgeReady();
        }

    </script>
</head>
<body>
<p id="result">result: </p>
</body>
</html>